<template>
  <div class="detail-background">
    <!-- begin 顶部区域 -->
    <div class="top-area">
      <img src="../assets/images/bg.png" alt="" />
    </div>
    <!-- end 顶部区域 -->
    <!-- begin 内容区域 -->
    <div class="content-area">
      <div class="title">
        <div class="main-title">
          <span class="ft-42">{{ answer.queModule }}</span>
        </div>
        <div class="sub-title">
          <span>{{ answer.associationNumber }}&nbsp;&nbsp;{{ answer.queName }}</span>
        </div>
      </div>
      <div class="content">
        <div class="content-item">
          <div class="content-title ft-16"> 合规义务 </div>
          <div class="content-text" v-html="answer.riskWarning" />
        </div>
        <div class="content-item">
          <div class="content-title ft-16"> 违规风险 </div>
          <div class="content-text" v-html="answer.respContent" />
        </div>
        <div class="content-item">
          <div class="content-title ft-16"> 合规责任岗位 </div>
          <div class="content-text" v-html="answer.respPost" />
        </div>
        <div class="content-item">
          <div class="content-title ft-16"> 合规监督岗位 </div>
          <div class="content-text" v-html="answer.supervisePost" />
        </div>
        <div class="content-item">
          <div class="content-title ft-16"> 法律法规 </div>
          <div class="content-text">
            <div v-for="qa in answer.qaLawRegulationsList">
              <div style="text-indent: 28.1pt">
                <a target="_blank" :href="qa.url" v-if="qa.url" class="file-url">{{ qa.name }}</a>
                <p v-else>{{ qa.name }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="content-item">
          <div class="content-title ft-16"> 管理制度 </div>
          <div class="content-text" v-html="answer.managementSystem" />
        </div>
        <div class="content-item">
          <div class="content-title ft-16"> 合规指引 </div>
          <div class="content-text">
            <div v-for="qa in answer.qaComplianceAdviceList">
              <div style="text-indent: 28.1pt">
                <a target="_blank" :href="qa.url" v-if="qa.url" class="file-url">{{ qa.name }}</a>
                <p v-else>{{ qa.name }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="content-item">
          <div class="content-title ft-16"> 典型案例 </div>
          <div class="content-text">
            <div v-for="qa in qaTypicalCaseListSort(answer.qaTypicalCaseList)" :key="qa.id">
              <div style="text-indent: 28.1pt">
                <a target="_blank" :href="qa.url" v-if="qa.url" class="file-url">{{ qa.name }}</a>
                <p v-else>{{ qa.name }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end 内容区域 -->
    <div class="content-seat" :style="{ height: pHeight }"></div>
    <!-- begin footer区域 -->
    <div class="footer-area">
      <span class="footer-content col-black"> Copyright@ 中国移动通信集团浙江有限公司 </span>
    </div>
    <!-- end footer区域 -->
  </div>
</template>
<script>
import API from "components/api-chat-window";
import lawaiUtils from "../utils/lawaiUtils";
import Qs from "qs";

export default {
  data() {
    return {
      answer: {},
      pHeight: "800px",
    };
  },
  created() {
    let bankNo = this.$route.query.bankNo;
    this.getAnswers(bankNo);
    let vue = this;
    let onresize = () => {
      let contentAreaHeight = document.querySelector(".content-area").clientHeight;
      vue.pHeight = contentAreaHeight * 0.9 + "px";
    };
    //计算高度
    setTimeout(onresize, 400);
    //调整大小时重新计算高度
    window.onresize = onresize;
  },
  methods: {
    /**
     * 典型案例子项排序
     * @param value 子项集合
     * @returns {*} 排序后的值
     */
    qaTypicalCaseListSort(value) {
      //当value为undefined时，直接返回
      if (!value) {
        return;
      }
      /**
       * 处理并转换输入的值数组。
       * @param {Array} value - 待处理的值数组，数组中的每一项应包含一个name属性。
       * @returns {Array} 返回处理后的值数组，其中如果元素的name属性以\n开头，则移除该开头。
       */
      const data = value.map((item) => {
        if (item.name.startsWith("\n")) {
          //当前数据的开头为\n，删除
          item.name = item.name.substring(1);
        }
        return item;
      });
      /**
       * 根据数据名称中的数字进行排序
       * @param {Array} data - 待排序的数据数组，每个元素包含一个名称属性
       * @returns {Array} - 排序后的数据数组
       */
      return data.sort((a, b) => {
        const regex = /^\d+/; //正则表达式匹配数字
        const front = Number(a.name.match(regex)[0]); //取前一个数据的开头的数字
        const behind = Number(b.name.match(regex)[0]); //取后一个数据的开头的数字
        // 比较两个数字并返回比较结果
        if (front > behind) {
          return 1;
        } else if (front < behind) {
          return -1;
        } else {
          return 0;
        }
      });
    },
    //获取详情
    getAnswers(bankNo) {
      let talkSessionId = lawaiUtils.getUuid();
      //查找出信息，
      API.getAnswerDetail(
        Qs.stringify({
          bankNo: bankNo,
          talkSessionId: talkSessionId,
        }),
      ).then((res) => {
        if (!res.result) {
          return;
        }
        //写到ans
        this.answer = res.data;
      });
    },
  },
};
</script>
<style scoped lang="less">
/deep/.content-text {
  p {
    font-size: 18px !important;
    span {
      font-size: 18px !important;
      font-family: inherit !important;
    }
  }
}
.file-url {
  font-size: 18px;
}
</style>
